<template>
  <el-container class="main-container">
    <el-header class="app-header">
        <div small-bg>
            <dv-decoration8 :reverse="true" style="width:500px;height:50px;" :color="['white', 'white']"/>
        </div>
        <div small-bg class="header-text">
            <p style="color: white;font-size:3vh;margin-bottom: 1vh;">农产品数字化实时追溯系统</p>
            <dv-decoration5 :dur="2" style="width:500px;height:40px;" :color="['white', 'orange']"/>
        </div>
        <div small-bg>
            <dv-decoration8 style="width:500px;height:50px;" :color="['white', 'white']"/>
        </div>
    </el-header>
      <div class="border-main">
          <dv-border-box11 title="智慧大棚实时监控" :title-width="400" :animate="true" style="height:90vh;">
              <div class="content">
                  <div class="aside">
                    <SoilDetect></SoilDetect>
                    <TemperatureDetect></TemperatureDetect>
                    <TemperStatistic></TemperStatistic>
                  </div>
                  <div class="main">
                      <div class="image-video">
                          <el-main v-loading="loading">
                              <div class="image">
                                <dv-border-box-1 style="width: 35vw; height: 32vh;" :color="['white', 'white']">
                                    <div class="grid-container">
                                        <ul class="grid-row" style="margin-top: 1vh">
                                            <li v-for="img of imageArr[0]" :key="img.picUrl">
                                                <img :src="img.picUrl" alt="Image" class="grid-image" @click="downloadImage(img.picUrl)"/>
                                            </li>
                                        </ul>
                                        <ul class="grid-row">
                                            <li v-for="img of imageArr[1]" :key="img.picUrl">
                                                <img :src="img.picUrl" alt="Image" class="grid-image" @click="downloadImage(img.picUrl)"/>
                                            </li>
                                        </ul>
                                        <ul class="grid-row">
                                            <li v-for="img of imageArr[2]" :key="img.picUrl">
                                                <img :src="img.picUrl" alt="Image" class="grid-image" @click="downloadImage(img.picUrl)"/>
                                            </li>
                                        </ul>
                                    </div>
                                </dv-border-box-1>
                            </div>
                          </el-main>
                          <div class="video">
                              <dv-border-box-1 style="width: 35vw;height: 40vh;" :color="['white', 'white']">
                                  <div style="padding-top: 1vh">
                                      <div id="ezuikit-player" class="player"></div>
                                  </div>
                              </dv-border-box-1>
                          </div>
                          <el-button type="primary" @click="Capture">拍照</el-button>
                      </div>
                  </div>
                  <div class="aside">
                    <WeatherForecast></WeatherForecast>
                    <TimerSensorDetect></TimerSensorDetect>
                    <SoilWaterDetect></SoilWaterDetect>
                  </div>
              </div>
          </dv-border-box11>
      </div>
  </el-container>
</template>

<script setup lang="ts">
import { BorderBox11 as DvBorderBox11 } from '@kjgl77/datav-vue3'
import SoilDetect from "@/components/SoilInfo/SoilDetect.vue";
import TemperatureDetect from "@/components/TemperatureInfo/TemperatureDetect.vue";
import TemperStatistic from "@/components/TemperStatistic/TemperStatistic.vue";
import WeatherForecast from "@/components/WeatherForecast/WeatherForecast.vue";
import TimerSensorDetect from "@/components/TimerSensorData/TimerSensorDetect.vue";
import SoilWaterDetect from "@/components/SoilWaterInfo/SoilWaterDetect.vue";
import {onMounted, reactive, ref} from "vue";
import axios from "@/Api/axiosInterceptor.ts";
import EZUIKit from 'ezuikit-js';
import {getCameraToken} from "@/Api/CameraApi.ts";
import {headerConfig} from "@/Api/HeaderConfig.ts";

onMounted(async ()=>{
    await getCameraToken();
    const UIKitDEMO = new EZUIKit.EZUIKitPlayer({
      id: `ezuikit-player`,
      url: 'ezopen://open.ys7.com/AB9831171/1.hd.live',
      accessToken: localStorage.getItem('accessToken'),
      template: 'simple',
    })
})
interface IMAGE {
    picUrl: string;
}

let image = reactive<IMAGE>({ picUrl: "" });
let imageArr = ref<Array<Array<IMAGE>>>([]); // 二维数组，用于存储图片
let counter = ref<number>(0); // 计数器，用于跟踪当前图片的位置

let loading = ref<boolean>(false);

function Capture() {
    if (loading.value == true){
        return
    }
    loading.value = true
    axios.get("http://localhost:8080/api/camera-datas/capture", headerConfig).then((response) => {
        Object.assign(image, response.data);
        // 添加图片到二维数组
        const currentRow = Math.floor(counter.value / 4); // 计算当前行号
        if (imageArr.value.length <= currentRow) {
            // 如果当前行不存在，则添加新行
            imageArr.value.push([]);
        }
        // 将图片添加到当前行
        if (counter.value < 12) {
            // 如果图片数量小于12张，则直接添加
            imageArr.value[currentRow].push({ ...image });
        } else {
            // 如果图片数量超过12张，则从第一张开始替换
            const replaceIndex = counter.value % 12;
            const replaceRow = Math.floor(replaceIndex / 4);
            const replaceCol = replaceIndex % 4;
            imageArr.value[replaceRow][replaceCol] = { ...image };
        }
        counter.value++; // 更新计数器
        loading.value = false;
    }).catch((error) => {
        console.log(error);
    });
}

function downloadImage(url) {
      const link = document.createElement('a');
      link.href = url;
      link.download = 'image.png';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
}

</script>

<style scoped>
.app-header {
    display: flex;
    justify-content: center;
}

.header-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.border-main{
    margin-top: 1vh;
}
.content{
    padding-top: 4vh;
    margin-left: 1vw;
    margin-right: 1vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.aside{
    width: 30vw;
    height: 80vh;
}
.main{
    width: 40vw;
    height: 80vh;
}

.image {
    margin-top: 2vh;
    width: 35vw;
    height: 35vh;
}

.video {
    width: 35vw;
    height: 40vh;
}

.image-video {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-container {
    background-image: url("../assets/img.png");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.player {
    width: 30vw;
    height: 38vh;
}

.grid-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 35vw;
    height: 30vh;
}

.grid-row {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    width: 35vw;
    height: 10vh;
    padding-left: 1vw;
    padding-right: 1vw;
    margin-top: 0;
    margin-bottom: 0;
    
    list-style: none;
}

.grid-image {
    width: 8vw;
    height: 9vh;
    object-fit: cover;
    border-radius: 1vw;
    cursor: pointer;
}
</style>